<template>
    <box left="1440px"
         top="720px"
         title="线上触点表现">
        <div class='rightbottom'>
            <div class="list flex space-around">
                <div class="flex">
                    <span class="val">{{data.channel}}</span>
                    <span class="unit">大渠道</span>
                </div>
                <div class="flex">
                    <span class="val">{{data.port}}</span>
                    <span class="unit">个端口</span>
                </div>
                <div class="flex">
                    <span class="val">{{data.shopType}}</span>
                    <span class="unit">种店铺形式</span>
                </div>
                <div class="flex">
                    <span class="val">{{data.shopCount}}</span>
                    <span class="unit">家店铺</span>
                </div>
            </div>
            <div class="chart-wrap flex">
                <div class="chart">
                    <div class="self">
                        <p class="label">自营</p>
                        <p><span class="value">{{data.self.count}}</span><span class="unit">家</span></p>
                    </div>
                    <div class="pop">
                        <p class="label">POP</p>
                        <p><span class="value">{{data.pop.count}}</span><span class="unit">家</span></p>
                    </div>
                </div>
                <div class="legend">
                    <div class="flex first">
                        <div class="item green flex"
                             v-for="(item,index) in data.self.children"
                             :key="'first'+index">
                            <div class="icon"></div>
                            <label for="">{{item.name}}</label>
                            <span>{{item.count}}</span>
                        </div>
                    </div>
                    <div class="flex second">
                        <div class="item blue flex"
                             v-for="(item,index) in data.pop.children"
                             :key="'second'+index">
                            <div class="icon"></div>
                            <label for="">{{item.name}}</label>
                            <span>{{item.count}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </box>

</template>

<script>
export default {
    props: {
        data: {},
    },

    methods: {},
    created() {},
}
</script>
<style lang='less' scoped>
.list {
    height: 50px;
    font-size: 14px;
    .val {
        font-size: 20px;
        margin-right: 2px;
        background: linear-gradient(#00f4f5, #007ef5);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        font-weight: bold;
    }
    .unit {
        color: rgba(255, 255, 255, 0.8);
    }
}
.chart-wrap {
    position: relative;
    height: 213px;
    width: 100%;
    .chart {
        width: 214px;
        height: 100%;
        background-image: url(../../../assets/img/home/right-bottom.png);
        font-size: 14px;
        padding-top: 40px;
        p {
            text-align: center;
        }
        .label {
            margin-bottom: 6px;
        }
        .value {
            font-size: 24px;
            margin-right: 2px;
            text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
        }
        .self {
            margin-bottom: 44px;
        }
    }
    .legend {
        height: 100%;
        flex: 1;
        font-size: 14px;
        .first {
            height: 92px;
        }
        .second {
            .item {
                margin-bottom: 20px;
            }
        }
        .item {
            margin-left: 8px;
            .icon {
                width: 6px;
                height: 6px;
                border-radius: 50%;
            }
            label {
                margin: 0 10px;
            }
            &.green {
                span {
                    color: #54bf75;
                    font-weight: bold;
                }
                .icon {
                    background: #68ec8a;
                    box-shadow: 0px 0px 15px 2px #68ec8a;
                }
            }
            &.blue {
                span {
                    color: #019cd5;
                    font-weight: bold;
                }
                .icon {
                    background: #00bfff;
                    box-shadow: 0px 0px 15px 2px #00bfff;
                }
            }
        }
    }
}
</style>